<ngm-property-select class="max-w-full" displayDensity="compact"
  [formControl]="formControl"
  [label]="label()"
  [editable]="true"
  [showAttributes]="true"
  [dataSettings]="dataSettings()"
  [entityType]="entityType()"
  [restrictedDimensions]="restrictedDimensions$ | async"
  [dsCoreService]="dsCoreService"
  [capacities]="capacities()"
  [syntax]="syntax()"
  (calculationChange)="onCalculationChange($event)"
>
  <div ngmSuffix>
    <ng-content select="[ngmSuffix]"></ng-content>
  </div>

  <div class="w-full flex flex-col items-stretch gap-1">
    @if (showChartAttributes() && isDimension()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">category</mat-icon>
          <span>{{ 'Story.ChartProperty.Role' | translate: {Default: 'Role'} }}</span>
        </label>

        <mat-button-toggle-group [(ngModel)]="role" ngmAppearance="hero" color="accent" class="self-start">
          <mat-button-toggle *ngFor="let role of DIMENSION_ROLES" [value]="role.value">
            {{ 'Story.ChartProperty.' + role.label | translate: {Default: role.label} }}
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>

      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">analytics</mat-icon>
          <span>{{ 'Story.ChartProperty.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
        </label>

        <ngm-chart-dimension-form class="w-full text-sm" [(ngModel)]="chartOptions" />
      </div>
    }
    @if (showMeasureRole()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">category</mat-icon>
          <span>{{ 'Story.ChartProperty.Role' | translate: {Default: 'Role'} }}</span>
        </label>

        <mat-button-toggle-group [(ngModel)]="role" ngmAppearance="hero" color="accent" class="self-start">
          <mat-button-toggle *ngFor="let role of MEASURE_ROLES" [value]="role.value">
            {{ 'Story.ChartProperty.' + role.label | translate: {Default: role.label} }}
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>
    }

    @if (showMeasureShape()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">interests</mat-icon>
          <span>{{ 'Story.ChartProperty.Shape' | translate: {Default: 'Shape'} }}...</span>
        </label>

        <mat-button-toggle-group [(ngModel)]="shapeType" ngmAppearance="hero" color="accent" class="self-start">
          <mat-button-toggle [value]="null">
            {{ 'Story.ChartProperty.None' | translate: {Default: 'None'} }}
          </mat-button-toggle>
          <mat-button-toggle *ngFor="let shape of SHAPE_TYPES" [value]="shape.value">
            {{ 'Story.ChartProperty.' + shape.label | translate: {Default: shape.label} }}
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>
    }
    @if (showMeasurePalettePattern()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">texture</mat-icon>
          <span>{{ 'Story.ChartProperty.Pattern' | translate: {Default: 'Pattern'} }}</span>
        </label>

        <mat-button-toggle-group [(ngModel)]="pattern" ngmAppearance="hero" color="accent" class="self-start">
          <mat-button-toggle [value]="null">
            {{ 'Story.ChartProperty.None' | translate: {Default: 'None'} }}
          </mat-button-toggle>
          <mat-button-toggle *ngFor="let item of PATTERNS" [value]="item.value">
            {{item.label}}
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>
    }

    @if (showColorPalette()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">style</mat-icon>
          <span>{{ 'Story.ChartProperty.Style' | translate: {Default: 'Style'} }}</span>
        </label>

        <button mat-flat-button displayDensity="comfortable" class="ngm-chart-property__palette-trigger w-full" [matMenuTriggerFor]="paletteMenu">
          <div class="w-full flex items-center">
            <mat-icon fontSet="material-icons-outlined">palette</mat-icon>
            <span>{{ 'Story.ChartProperty.Palette' | translate: {Default: 'Palette'} }}</span>
            <span class="flex-1"></span>
            
            <mat-icon fontSet="material-icons-outlined">arrow_right</mat-icon>
          </div>
        </button>

        <div class="flex justify-start items-center">
          <ngm-colors class="flex-1" [label]=" 'Story.ChartProperty.Colors' | translate: {Default: 'Colors'} "
            [options]="colorPalettes"
            [(ngModel)]="colors"
            (ngModelChange)="onColorsChange($event)"
            (click)="$event.stopPropagation()">
          </ngm-colors>
        </div>
      </div>
    }

    <!-- For analytical grid @todo move to analytical grid module -->
    @if (showMeasureGridBar()) {
      <div class="ngm-chart-property__card">
        <mat-checkbox [(ngModel)]="bar">
          <div class="flex-1 flex items-center">
            <mat-icon class="shrink-0" fontSet="material-icons-outlined">sort</mat-icon>
            <span>{{ 'Story.ChartProperty.BarChart' | translate: {Default: 'Bar Chart'} }}</span>
          </div>
        </mat-checkbox>
      </div>
    }
    <!-- End -->
    @if (showMeasureReferenceLine()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">trending_flat</mat-icon>
          <span>{{ 'Story.ChartProperty.ReferenceLine' | translate: {Default: 'Reference Line'} }}</span>
        </label>

        <ngm-reference-line class="w-full text-sm" [(ngModel)]="referenceLines"></ngm-reference-line>
      </div>
    }

    @if (showMeasureChartOptions()) {
      <div class="ngm-chart-property__card">
        <label class="ngm-chart-property__card-title flex justify-start items-center px-2 py-1">
          <mat-icon class="shrink-0" fontSet="material-icons-outlined" displayDensity="compact">analytics</mat-icon>
          <span>{{ 'Story.ChartProperty.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
        </label>

        <ngm-chart-measure-form class="w-full text-sm"
          [(ngModel)]="chartOptions"
          [chartType]="_chartType()"
        />
      </div>
    }
  </div>
</ngm-property-select>


<mat-radio-group [(ngModel)]="palette" displayDensity="cosy">
  <mat-menu #paletteMenu="matMenu" class="ngm-density__compact">
    <ng-template matMenuContent>
      <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
        <mat-radio-button class="ngm-radio-button__property" [value]="null">
          {{ 'Story.ChartProperty.None' | translate: {Default: 'None'} }}
        </mat-radio-button>
      </button>
  
      <ng-container *ngFor="let group of interpolateGroups">
        <button mat-menu-item disableRipple disabled>
          {{group.groupName}}
        </button>
  
        <button mat-menu-item disableRipple *ngFor="let interpolate of group.values"
          (click)="$event.stopPropagation();">
          <mat-radio-button [value]="interpolate.name" class="ngm-radio-button__property flex-1 w-full">
            <ngm-chromatic-preview class="flex-1 w-full" [interpolate]="interpolate"></ngm-chromatic-preview>
          </mat-radio-button>
        </button>
      </ng-container>
    </ng-template>
  </mat-menu>
</mat-radio-group>
